<template>
  <div class="month-panel">
    <div
      class="month-item"
      :class="getClassName(item.status)"
      v-for="(item, index) in monthList"
      :key="index"
      @click="chooseMonth(item.value)"
    >
      <span>{{getMonth(item.value)}}月</span>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { computed, inject } from 'vue'
const MONTH_COOUNT = 16
const setStatus = (date, currentDate) => {
  if (date.isBefore(dayjs(currentDate).startOf('year'))) {
    return 'before'
  } else if (date.isAfter(dayjs(currentDate).endOf('year'))) {
    return 'after'
  } else if (date.isSame(dayjs(), 'month')) {
    return 'active'
  } else {
    return 'current'
  }
}
const getMonthList = (currentDate) => {
  let monthList = []
  const firstMonth = dayjs(currentDate).startOf('year')
  for (let i = 0; i < MONTH_COOUNT; i++) {
    const value = firstMonth.add(i, 'month')
    monthList.push({
      value,
      status: setStatus(value, currentDate)
    })
  }
  return monthList
}
export default {
  name: 'monthPanel',
  setup () {
    const currentDate = inject('currentDate')
    const monthList = computed(() => getMonthList(currentDate.value))
    const getMonth = (month) => {
      return month.month() + 1
    }
    const getClassName = (status) => {
      switch(status) {
        case 'before':
          return 'unactive'
        case 'after':
          return 'unactive'
        case 'active':
          return 'active'
      }  
    }
    const setMode = inject('setMode')
    const setDate = inject('setDate')
    const chooseMonth = (date) => {
      setMode('day')
      setDate(date)
    }
    return {
      monthList,
      getMonth,
      getClassName,
      chooseMonth
    }
  }
}
</script>

<style lang="less" scoped>
.month-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .month-item {
    width: calc(~"25% - 2px");
    height: calc(~"25% - 2px");
    box-sizing: border-box;
    text-align: center;
    border: 2px solid #999;
    span {
      display: inline-block;
      width: 100%;
      height: 100%;
      line-height: 80px;
      font-weight: 500;
      position: relative;
      z-index: 1;
    }
    &:hover {
      border: 2px solid rgba(255, 255, 255, 0.5);
      position: relative;
      z-index: 1;
    }
  }
  .unactive {
    color: #999;
  }
  .active {
    border: 2px solid #007fff;
    background-color: #007fff;
    position: relative;
    z-index: 1;
  }
}
</style>